<template>
  <el-card>
    <el-row>
      <el-col :span="12" :offset="8">
        <my-date-day v-on:query="queryData"></my-date-day>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div id="ddjh_chart"></div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import myDateDay from "../../myDateDay.vue";
export default {
  components: {
    myDateDay,
  },
  methods: {
    async queryData(pdate) {
      const { data: res } = await this.$http.get(
        `/manage1/ddjh/da/vue_da_ddjh_chart?pdate=${pdate}`
      );
      console.log(res);
      this.initChart(res);
    },
    initChart(res) {
      var myChart = this.$echarts.init(document.getElementById("ddjh_chart"));
      myChart.clear();
      var option = {
        title: {
          text: "省网用电",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["实际用电", "计划用电"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: res.xAxisList[0],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "计划用电",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: res.data1[0],
          },
          {
            name: "实际用电",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: res.data2[0],
          },
        ],
      };
      // this.$nextTick(function () {
      option && myChart.setOption(option);
      // });
    },
  },
};
</script>
    
<style scoped>
/* .el-card {
  width: 100%;
  height: 100%;
} */
#ddjh_chart {
  margin-top: 50px;
  width: 100%;
  height: 400px;
}
</style>